<!--公用上传组件：
  /**
    只能上传到私有空间
  * 组件名称  uploadList
  * @param info    - 必须是一个对象，并且其中要包含保存文件ID的字段
  * @param propName    - 保存文件ID的字段名
  * @param onlyRead  -是否只读
  * @param restrict  -能上传的格式
  * @param explain   -下方的备注
  * @example 调用示例
  *  <uploadList  :info='item' :propName="'file'" />
      */
   -->

<template>
    <div>
        <div class="file-list">
          <div v-for="(item, index) of info" :key="index">
            <div class="img-list">
                <img :src="baseUrl+ '/' +item[urlName]" alt="" />
                <div class="maskBox">
                    <div class="mask"></div>
                    <div class="maskBtn">
                        <i class="el-icon-zoom-in" @click.stop="handlePreview(info, index)"></i>
                        <i class="el-icon-delete" v-if="!disabled" @click.stop="handleRemove(info, index)"
                        ></i>
                    </div>
                </div>
            </div>
            <div class="display: flex;">
              <div>排序： </div>
              <el-input style="width:160px;" type="text" v-model="item[sortName]" />
            </div>
          </div>

            <div class="">
                <el-upload
                    :action="postUrl"
                    :show-file-list="false"
                    v-if="!disabled"
                    :on-progress="getProgress"
                    :on-preview="handlePictureCardPreview"
                    :on-success="
                        (res, file) => {
                            return handleAvatarSuccess(res, file)
                        }
                    "
                    :before-upload="beforeAvatarUpload"
                    class="avatar-uploader"
                >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <el-progress
                        v-if="progressFlag"
                        type="circle"
                        :percentage="uploadPercent"
                        class="progress-box"
                    ></el-progress>
                </el-upload>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['info', 'postUrl', 'baseUrl', 'urlName', 'sortName', 'disabled'],
    computed: {

    },
    data() {
        return {
            token: null,
            fileType: 'file-excel',
            uploadPercent: 0,
            dialogImageUrl: '',
            dialogVisible: false,
            progressFlag: false,
            restricts: ['jpg', 'png'],
        }
    },
    watch: {

    },
    methods: {
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        checkFileType(type) {
            let testmsg = type.substring(type.lastIndexOf('.') + 1)
            const extension2 = 'png'
            const extension3 = 'jpg'
            if (testmsg.toLowerCase() == extension2 || testmsg.toLowerCase() == extension3) return false
            else return true
        },
        changeFileType(type) {
            let testmsg = type.substring(type.lastIndexOf('.') + 1)
            if (/doc/.test(testmsg.toLowerCase())) return 'file-word'
            if (testmsg.toLowerCase() == 'pdf') return 'file-pdf'
            if (/ppt/.test(testmsg.toLowerCase())) return 'file-ppt'
            if (/xls/.test(testmsg.toLowerCase())) return 'file-excel'
        },
        getProgress(res) {
            this.uploadPercent = Number(res.percent.toFixed(0))
        },
        //上传成功的回调
        handleAvatarSuccess(res, file) {
            this.progressFlag = false
            this.uploadPercent = 0
            var obj = {}
            obj[this.urlName] = res.data
            this.info.push(obj)
        },
        // 文件校验
        beforeAvatarUpload(file) {
            let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
            let matching = false
            this.restricts.forEach(element => {
                if (element == testmsg.toLowerCase()) matching = true
            })
            if (matching) {
                this.progressFlag = true
                return true
            } else {
                this.$message({
                    message: `不能上传${testmsg}格式文件`,
                    type: 'warning',
                })
                return false
            }
        },
        // 预览图片
        handlePreview(e, index) {
            if (/\.(jpg|png|gif|bmp|jpeg)$/.test(e[index].fileId)) {
                window.open(`/api/file/preview?fileId=${encodeURIComponent(e[index].fileId)}&type=qiniu`, '_blank')
            } else {
                window.open(e[index].fileId, '_blank')
            }
        },
        // 删除
        handleRemove(type, index) {
            type.splice(index, 1)
        },
    },
    created() {

    },
    mounted() {},
}
</script>

<style lang="scss">
.file-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    .avatar-uploader {
        margin-left: 10px !important;
        .avatar {
            width: 152px;
            height: 152px;
            display: block;
            padding: 5px;
            border-radius: 4px;
            border: 1px dashed #d9d9d9;
        }
    }
    .el-upload--picture-card {
        width: 152px;
        height: 152px;
    }
    .img-list:hover .maskBox {
        display: block;
    }
    .avatar-uploader .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 152px;
        height: 152px;
        line-height: 152px;
        border: 1px dashed #d9d9d9;

        span {
            font-size: 12px;
            color: rgb(161, 163, 167);
            position: absolute;
            bottom: -25px;
            left: 27px;
        }
    }
    .svg-icon {
        // position: absolute;
        border: 1px dashed #d9d9d9;
    }
    .progress-box {
        border: 1px dashed #d9d9d9;
        height: 152px;
        width: 152px;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        background: #ffffff;
        .el-progress-circle {
            padding: 5px;
            height: 152px !important;
            width: 152px !important;
            padding: 0;
        }
    }

    > div {
        margin-top: 10px;
    }
    .img-list {
        box-sizing: border-box;
        flex: 1;
        max-width: 152px;
        min-width: 152px;
        height: 152px;
        margin: 10px 10px 0 10px;
        position: relative;
        padding: 5px;
        border: 1px dashed #c2c6d1;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
            height: 100%;
        }

        .avatar {
            width: 60px;
            height: 60px;
        }
        .svg-icon {
            border: 0;
        }
    }
    .maskBox {
        display: none;
        position: absolute;
        z-index: 5;
        width: 152px;
        height: 152px;
        top: 0;
        left: 0;

        .mask {
            width: 152px;
            height: 152px;
            position: absolute;
            background-color: #191919;
            opacity: 0.4;
            top: -1px;
            left: -1px;
            border: solid 1px #ebebeb;
            border-radius: 3px;
            transition: 0.2s;
        }
        .maskBtn {
            box-sizing: border-box;
            position: absolute;
            width: 152px;
            height: 152px;
            padding-top: 60px;
            text-align: center;

            i {
                color: #ffffff;
                font-size: 25px;
                margin: 0 5px;
                cursor: pointer;
            }
        }
    }
    .fileName {
        position: absolute;
        bottom: -30px;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100px;
    }
    .el-input__inner{
      width: 160px;
    }
}
</style>
